Popovers

A popover is a non-modal dialog.

Basedev ready

Preview

Code

<div class="slds-popover slds-nubbin--left" role="dialog">
  <div class="slds-popover__body">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi laudantium molestias reprehenderit nostrum quod natus saepe ea corrupti odit minima?</p>
  </div>
</div>

A popover, .slds-popover, can be applied to all variants of a popover. It initiates the styles of the popover and enables .slds-nubbin to be applied.

Tooltipsdev ready

Preview

Code

<div class="slds-popover slds-popover--tooltip slds-nubbin--bottom" role="tooltip">
  <div class="slds-popover__body">Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi.</div>
</div>

Tooltips provide additional information about a particular input field or element on the page.

The popup text appears when the user hovers or tabs into the “info” icon and disappears when the user hovers off or tabs away.

Panelsdev ready

Preview

Code

<div class="slds-popover slds-popover--panel slds-nubbin--left-top" role="dialog">
  <div class="slds-popover__header">
    <div class="slds-media slds-media--center slds-m-bottom--small">
      <div class="slds-media__figure">
        <span class="slds-icon_container slds-icon-standard-account">
          <svg aria-hidden="true" class="slds-icon slds-icon--large">
            <use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#account"></use>
          </svg>
          <span class="slds-assistive-text">Tesla Motors</span>
        </span>
      </div>
      <div class="slds-media__body"><a href="#void" class="slds-text-heading--medium">Tesla Motors</a></div>
    </div>
    <div class="slds-grid slds-wrap slds-grid--pull-padded">
      <div class="slds-col--padded slds-size--1-of-2 slds-p-bottom--x-small">
        <dl>
          <dt>
            <p class="slds-text-heading--label slds-truncate">Billing Address</p>
          </dt>
          <dd>
            <p class="slds-truncate">3500 Deer Creek Rd.</p>
            <p class="slds-truncate">Palo Alto, CA 94304</p>
          </dd>
        </dl>
      </div>
      <div class="slds-col--padded slds-size--1-of-2 slds-p-bottom--x-small">
        <dl>
          <dt>
            <p class="slds-text-heading--label slds-truncate">Phone</p>
          </dt>
          <dd><a href="#void">212-345-3485</a></dd>
        </dl>
      </div>
      <div class="slds-col--padded slds-size--1-of-2 slds-p-bottom--x-small">
        <dl>
          <dt>
            <p class="slds-text-heading--label slds-truncate">Website</p>
          </dt>
          <dd><a href="#void">teslamotors.com</a></dd>
        </dl>
      </div>
      <div class="slds-col--padded slds-size--1-of-2 slds-p-bottom--x-small">
        <dl>
          <dt>
            <p class="slds-text-heading--label slds-truncate">Account Owner</p>
          </dt>
          <dd><a href="#void">Jeff Maguire</a></dd>
        </dl>
      </div>
    </div>
  </div>
  <div class="slds-popover__body">
    <dl class="slds-popover__body-list">
      <dt class="slds-m-bottom--small">
        <div class="slds-media slds-media--center">
          <div class="slds-media__figure">
            <span class="slds-icon_container slds-icon-standard-opportunity">
              <svg aria-hidden="true" class="slds-icon slds-icon--small">
                <use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#opportunity"></use>
              </svg>
              <span class="slds-assistive-text">Opportunities</span>
            </span>
          </div>
          <div class="slds-media__body">
            <p class="slds-text-heading--small">Opportunities (2+)</p>
          </div>
        </div>
      </dt>
      <dd class="slds-tile">
        <p class="slds-tile__title slds-truncate"><a href="#void">Tesla - Mule ESB</a></p>
        <div class="slds-tile__detail">
          <dl class="slds-dl--horizontal slds-text-body--small">
            <dt class="slds-dl--horizontal__label">
              <p class="slds-truncate">Value</p>
            </dt>
            <dd class="slds-dl--horizontal__detail slds-tile__meta">
              <p class="slds-truncate">$500,000</p>
            </dd>
            <dt class="slds-dl--horizontal__label">
              <p class="slds-truncate">Close Date</p>
            </dt>
            <dd class="slds-dl--horizontal__detail slds-tile__meta">
              <p class="slds-truncate">Dec 15, 2015</p>
            </dd>
          </dl>
        </div>
      </dd>
      <dd class="slds-tile">
        <p class="slds-tile__title slds-truncate"><a href="#void">Tesla - Anypoint Studios</a></p>
        <div class="slds-tile__detail">
          <dl class="slds-dl--horizontal slds-text-body--small">
            <dt class="slds-dl--horizontal__label">
              <p class="slds-truncate">Value</p>
            </dt>
            <dd class="slds-dl--horizontal__detail slds-tile__meta">
              <p class="slds-truncate">$60,000</p>
            </dd>
            <dt class="slds-dl--horizontal__label">
              <p class="slds-truncate">Close Date</p>
            </dt>
            <dd class="slds-dl--horizontal__detail slds-tile__meta">
              <p class="slds-truncate">Jan 15, 2016</p>
            </dd>
          </dl>
        </div>
      </dd>
      <dd class="slds-m-top--small"><a href="#void" title="View all Opportunities">View All</a></dd>
    </dl>
    <dl class="slds-popover__body-list">
      <dt class="slds-m-bottom--small">
        <div class="slds-media slds-media--center">
          <div class="slds-media__figure">
            <span class="slds-icon_container slds-icon-standard-case">
              <svg aria-hidden="true" class="slds-icon slds-icon--small">
                <use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#case"></use>
              </svg>
              <span class="slds-assistive-text">Cases</span>
            </span>
          </div>
          <div class="slds-media__body">
            <p class="slds-text-heading--small">Cases (1)</p>
          </div>
        </div>
      </dt>
      <dd class="slds-tile">
        <p class="slds-tile__title slds-truncate"><a href="#void">Tesla - Anypoint Studios</a></p>
        <div class="slds-tile__detail">
          <dl class="slds-dl--horizontal slds-text-body--small">
            <dt class="slds-dl--horizontal__label">
              <p class="slds-truncate">Value</p>
            </dt>
            <dd class="slds-dl--horizontal__detail slds-tile__meta">
              <p class="slds-truncate">$60,000</p>
            </dd>
            <dt class="slds-dl--horizontal__label">
              <p class="slds-truncate">Close Date</p>
            </dt>
            <dd class="slds-dl--horizontal__detail slds-tile__meta">
              <p class="slds-truncate">Jan 15, 2016</p>
            </dd>
          </dl>
        </div>
      </dd>
      <dd class="slds-m-top--small"><a href="#void" title="View all Cases">View All</a></dd>
    </dl>
  </div>
</div>

Panels are used to provide a preview of the hyperlinked content.

Themesdev ready

Preview

Code

<div class="slds-popover slds-nubbin--left slds-theme--info" role="dialog">
  <div class="slds-popover__body">Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi.</div>
</div>

A .slds-popover can accept theme modifiers. Adding a theme class such as .slds-theme--error to the .slds-popover will apply that theme.

Nubbinsdev ready

Preview

Code

<div class="slds-popover slds-nubbin--left" role="dialog">
  <div class="slds-popover__body">
    <code>slds-popover
      <br/>slds-nubbin--left</code>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum, quaerat? Accusamus excepturi eos, molestias expedita distinctio eligendi ut esse quasi!</p>
  </div>
</div>

Nubbins are indicators that inform the user of the direction of the content associated with the popover.

Component Overview

A popover is used to display contextual information to the user. It can be a simple tooltip or used for more complex components, such as a preview panel.

A popover can accept the following nubbin position classes, .slds-nubbin--left, .slds-nubbin--left-top, .slds-nubbin--left-bottom, .slds-nubbin--top-left, .slds-nubbin--top-right, .slds-nubbin--right-top, .slds-nubbin--right-bottom, .slds-nubbin--bottom-left, .slds-nubbin--bottom-right.

Accessibility

Showing the popover on hover or on keyboard focus ensures that all users can access it, even if they aren’t using a mouse.

Give the popover an ID and use that as the value of the aria-describedby attribute of the DOM element it describes. This helps users of assistive technology read the tooltip content.

Usage

This table gives you a quick overview of the SLDS CSS classes that can be applied to this component.
Class NameUsage
.slds-popover
Applied to:

<div>

Outcome:

Initializes popover

Required:

Required

Comments:

--

.slds-popover__header
Applied to:

<div>

Outcome:

Applies styles for top area of popover

Required:

No, optional element or modifier

Comments:

--

.slds-popover__body
Applied to:

<div>

Outcome:

Applies syles for primary content area of popover

Required:

No, optional element or modifier

Comments:

--

.slds-popover--tooltip
Applied to:

.slds-popover

Outcome:

Modifier used to apply tooltip specific styles

Required:

No, optional element or modifier

Comments:

--

.slds-popover--panel
Applied to:

.slds-popover

Outcome:

Modifier used to apply panel specific styles

Required:

No, optional element or modifier

Comments:

--

.slds-nubbin--top
Applied to:

.slds-popover

Outcome:

Triangle that points upwards which is horizontally centered

Required:

No, optional element or modifier

Comments:

--

.slds-nubbin--top-left
Applied to:

.slds-popover

Outcome:

Triangle that points upwards which is left aligned

Required:

No, optional element or modifier

Comments:

--

.slds-nubbin--top-right
Applied to:

.slds-popover

Outcome:

Triangle that points upwards which is right aligned

Required:

No, optional element or modifier

Comments:

--

.slds-nubbin--bottom
Applied to:

.slds-popover

Outcome:

Triangle that points downwards which is horizontally centered

Required:

No, optional element or modifier

Comments:

--

.slds-nubbin--bottom-left
Applied to:

.slds-popover

Outcome:

Triangle that points downwards which is left aligned

Required:

No, optional element or modifier

Comments:

--

.slds-nubbin--bottom-right
Applied to:

.slds-popover

Outcome:

Triangle that points downwards which is right aligned

Required:

No, optional element or modifier

Comments:

--

.slds-nubbin--left
Applied to:

.slds-popover

Outcome:

Triangle that points to the left which is vertically centered

Required:

No, optional element or modifier

Comments:

--

.slds-nubbin--left-top
Applied to:

.slds-popover

Outcome:

Triangle that points to the left which is top aligned

Required:

No, optional element or modifier

Comments:

--

.slds-nubbin--left-bottom
Applied to:

.slds-popover

Outcome:

Triangle that points to the right which is bottom aligned

Required:

No, optional element or modifier

Comments:

--

.slds-nubbin--right
Applied to:

.slds-popover

Outcome:

Triangle that points to the right which is vertically centered

Required:

No, optional element or modifier

Comments:

--

.slds-nubbin--right-top
Applied to:

.slds-popover

Outcome:

Triangle that points to the right which is top aligned

Required:

No, optional element or modifier

Comments:

--

.slds-nubbin--right-bottom
Applied to:

.slds-popover

Outcome:

Triangle that points to the right which is bottom aligned

Required:

No, optional element or modifier

Comments:

--